<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
        user-select: none;
        }
/*动画*/
        /*背景动画*/
        @keyframes gradientBG {
            0% {
                background-position: 0% 50%;/*在开始时，设置背景图像的起始位置，第一个值是水平位置，第二个值是垂直位置。*/
            }

            50% {
                background-position: 100% 50%;/*在一半时，设置背景图像的起始位置，第一个值是水平位置，第二个值是垂直位置。*/
            }

            100% {
                background-position: 0% 50%;/*在结束时，设置背景图像的起始位置，第一个值是水平位置，第二个值是垂直位置。*/
            }
        }
/*0.基础*/
        body{
            box-sizing: border-box;
        }
        body,html,.all,table,tr,td{
            margin: 0;/*内边距为0*/
            padding: 0;/*外边距为0*/
        }
/*1.标题字*/
        h1{
            position: absolute;/*开启绝对定位*/
            /*使文字顶部居中*/
            left: 50%;/*设置位置*/
            transform:translateX(-50%);/*设置位置*/
        }
/*2.body*/
        body{
            width: 100%;/*宽度为100%*/
            height: 100vh;/*视窗高度的百分比*/

            font-family: "Exo", sans-serif; /*设置字体样式*/
            color: #fff;/*设置前景色为#fff*/
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);/*设置渐变，选取的角度为-45deg， 四个渐变颜色*/
            background-size: 400% 400%;/*设置背景图像的高度和宽度*/
            animation: gradientBG 15s ease infinite; /*调用gradientBG，完成动画所花费时间15s，动画以低速开始，然后加快，在结束前变慢。设置为无限循环*/
        }

/*3.操作窗口*/
        .all{
            position: absolute;/*开启绝对定位*/
            height: 500px;/*设置高度*/
            width: 350px;/*设置宽度*/
            /*使操作窗口居中*/
            left: 50%;/*设置位置*/
            transform:translateX(-50%);/*设置位置*/
            margin-top: 150px;/*调整距离顶部位置*/
            background-color: #ffffff;
        }

        .time,.course{
            position: absolute;
            color: red;
            height: 50px;
            width: 50px;
        }
        /* 时间计时 */
        .time{
            left: 40px;
        }
        /* 分数 */
        .course{
            left: 50%;/*设置位置*/
            transform:translateX(-50%);/*设置位置*/  
            top: 5px;  
            line-height: 50px;
            text-align: center;   
            background-color: ''; 
            display: block;
        }
        /* 表格外层div */
        .tables{
            width: 225px;
            margin: 0 auto;
            margin-top: 60px;
            border: 1px solid rgb(188, 214, 198);
        }
        /* 单元格设置 */
        td{
            height: 100px;
            width: 75px;
            border: 1px solid black;

        }
        /* 消除间距 */
        table{
            border-spacing: 0px;
        }


/* 提示信息设置 */
        .tishi{
            position: absolute;
            height:350px;
            width: 600px;
            background-color: rgb(70, 145, 86);
            left: 50%;/*设置位置*/
            transform:translate(-50%,50%);/*设置位置*/
            z-index: 1; 
            border-radius: 50px;

        }
/* 开始按钮设置 */
        .bb{
            position: absolute;
            height: 50px;
            width: 100px;
            background-color: rgb(75, 158, 206);
            left: 50%;/*设置位置*/
            transform:translateX(-50%);/*设置位置*/
            top:70%;
            border: 1px solid grey;
            border-radius: 15px;
            color: rgb(36, 67, 71); 
        }
        .yongshi,.fenshu{
            position: absolute;
            left: 150px;
            color: red;
            top: 100px;
        }
        .fenshu{
            top: 140px;
        }

        table{
            border-collapse:"collapse";
        }
        .gameo{
            position: absolute;
            left: 50%;/*设置位置*/
            transform:translateX(-50%);/*设置位置*/
            font-size: 50px;
            display: none;
        }

        td:hover,
        span:hover,
        h1:hover,
        button:hover{
            cursor: pointer;
        }

        .h11{
            top: 50px;
        }

        .shijian,.defen{
            position: absolute;
            height: 20px;
            width: 60px;
            color: black;
        }
        .defen{
            left: 35%;/*设置位置*/
            top: 19px;
        }
        .shijian{
            top:-0.5px;
        }
        .xinxi{
            position: absolute;
            top: 25px;
            left: 500px;
            color: rgb(0, 0, 0);
            text-align: center;
        }
    </style>
</head>
<body>
<!--标题字体-->
    <h1>Time wdil Tell!</h1>
    <h1 class="h11">别踩白块</h1>

<!--操作窗口-->
    <div class="xinxi">
        控制键：<br>
              左列：a <br>
              中列：s <br>
              右列：d
    </div>
    <div class="tishi">
        <span class="gameo">game over</span>
        <span class="yongshi"></span>
        <span class="fenshu"></span>
        <button class="bb">开始游戏</button>
    </div>

    <div class="all">
        <span class="defen">得分：</span>
        <span class="shijian">时间：</span>
        <span class="time">0</span>
        <span class="course">0</span>
        <div class="tables">
            <table id="tableobj" >
                <tr class="one">
                    <td class="oned"></td>
                    <td class="twod"></td>
                    <td class="threed"></td>
                </tr>
                <tr class="two">
                    <td class="fourd"></td>
                    <td class="fived"></td>
                    <td class="sixd"></td>
                </tr>
                <tr class="three">
                    <td class="sevend"></td>
                    <td class="eightd"></td>
                    <td class="nined"></td>
                </tr>
                <tr class="four">
                    <td class="tend"></td>
                    <td class="elevend"></td>
                    <td class="twelved"></td>
                </tr>
            </table>
        </div>
    </div>

    <script>
        // 1.定义游戏对象game：
        game = {
            // b.游戏交互逻辑方法


            // c.结束游戏逻辑方法
            //1.结束游戏
            gover : function (){
                clearTimeout(t);
                time.innerText = 0;
                course.innerText = 0;
                bb.innerText = '重新开始';
                html.removeEventListener('keydown',cheest.relxs);
                gameostyle.display = 'block';
            },
            //2.结束游戏画面值设置
            a :function (){
                bbstyle.display = 'block';
                tishistyle.display = 'block';

                yongshi.innerText = '用时：' + time.innerText + '秒';
                fenshu.innerText = '分数：' + course.innerText + '分';
            },
        }
            // a.初始化游戏方法


            // d.重新开始游戏方法
        // 2.定义布局（棋盘）对象：
        cheest = {

            // a.初始化棋盘方法：每行都有一个背景颜色为黑色的方块、
            start : function(){
                twelvedstyle.backgroundColor = 'black';
                eightdstyle.backgroundColor = 'black';
                fourdstyle.backgroundColor = 'black';
                twodstyle.backgroundColor = 'black';
            },
            // b.新增一行方法 （按键位置随机）
            //1.将上三层背景颜色统一下移一行
            moves : function(){
                if(sevendstyle.backgroundColor == 'black'){
                    sevendstyle.backgroundColor = '';
                    tendstyle.backgroundColor = 'black';
                }else if(eightdstyle.backgroundColor == 'black'){
                    eightdstyle.backgroundColor = '';
                    elevendstyle.backgroundColor = 'black';
                }else{
                    ninedstyle.backgroundColor = '';
                    twelvedstyle.backgroundColor = 'black';
                }

                if(fourdstyle.backgroundColor == 'black'){
                    fourdstyle.backgroundColor = '';
                    sevendstyle.backgroundColor = 'black';
                }else if(fivedstyle.backgroundColor == 'black'){
                    fivedstyle.backgroundColor = '';
                    eightdstyle.backgroundColor = 'black';
                }else{
                    sixdstyle.backgroundColor = '';
                    ninedstyle.backgroundColor = 'black';
                }

                if(onedstyle.backgroundColor == 'black'){
                    onedstyle.backgroundColor = '';
                    fourdstyle.backgroundColor = 'black';
                }else if(twodstyle.backgroundColor == 'black'){
                    twodstyle.backgroundColor = '';
                    fivedstyle.backgroundColor = 'black';
                }else{
                    threedstyle.backgroundColor = '';
                    sixdstyle.backgroundColor = 'black';
                }
            },
            //2.生成顶层
            change : function(){
                switch (parseInt(Math.random()*(3) + 1)){
                    case 1:
                    
                        onedstyle.backgroundColor = 'black'
                        break;
                    case 2:
                        twodstyle.backgroundColor = 'black'
                        break;
                    case 3:
                        threedstyle.backgroundColor = 'black'
                        break;
                }
            },

        }

        // 3.定义案件（用户敲击位置）对象：
        userkey = {
            // a.键盘敲击时间的绑定的方法
            relxs :function(event){
                switch(event.key){
                    case 'a':
                        if(tendstyle.backgroundColor == 'black'){
                            tendstyle.backgroundColor = '';
                            cheest.moves();
                            cheest.change();
                            //分数计算
                            course.innerText ++;
                        }else{
                            game.a();
                            game.gover();
                        }
                        break;
                    case 's':
                        if(elevendstyle.backgroundColor == 'black'){
                            elevendstyle.backgroundColor = '';
                            cheest.moves();
                            cheest.change();
                            //分数计算
                            course.innerText ++;
                        }else{
                            game.a();
                            game.gover();
                        }
                        break;
                    case 'd':
                        if(twelvedstyle.backgroundColor == 'black'){
                            twelvedstyle.backgroundColor = '';
                            cheest.moves();
                            cheest.change();
                            //分数计算
                            course.innerText ++;
                        }else{
                            game.a();
                            game.gover();
                        }
                        break;
                }
            },

        }

            // b.判断是否敲击正确的方法

        
        //结束元素获取
        var gameo = document.getElementsByClassName('gameo')[0];
        var gameostyle = gameo.style;
        //分数元素获取
        var q = 0;
        var course = document.getElementsByClassName('course')[0];

        var oned = document.getElementsByClassName('oned')[0];
        var onedstyle = oned.style;
        var twod = document.getElementsByClassName('twod')[0];
        var twodstyle = twod.style;
        var threed = document.getElementsByClassName('threed')[0];
        var threedstyle = threed.style;
        var fourd = document.getElementsByClassName('fourd')[0];
        var fourdstyle = fourd.style;
        var fived = document.getElementsByClassName('fived')[0];
        var fivedstyle = fived.style;
        var sixd = document.getElementsByClassName('sixd')[0];
        var sixdstyle = sixd.style;
        var sevend = document.getElementsByClassName('sevend')[0];
        var sevendstyle = sevend.style;
        var eightd = document.getElementsByClassName('eightd')[0];
        var eightdstyle = eightd.style;
        var nined = document.getElementsByClassName('nined')[0];
        var ninedstyle = nined.style;
        var tend = document.getElementsByClassName('tend')[0];
        var tendstyle = tend.style;
        var elevend = document.getElementsByClassName('elevend')[0];
        var elevendstyle = elevend.style;
        var twelved = document.getElementsByClassName('twelved')[0];
        var twelvedstyle = twelved.style;


        //调用初始化
        cheest.start();

        //计时器基础
        var t;
        var bb = document.getElementsByClassName('bb')[0];
        var tishi = document.getElementsByClassName('tishi')[0];
        var bbstyle = bb.style;
        var tishistyle = tishi.style;

        bb.addEventListener('click',Times);
        //计时器
        var time = document.getElementsByClassName('time')[0];
        function Times(){
            time.innerText++;
            t = setTimeout(Times,1000);
        }

        //开始页面隐藏
        bb.addEventListener('click',function (){
            bbstyle.display = 'none';
            tishistyle.display = 'none';
            html.addEventListener('keydown',userkey.relxs);
        });

        //键盘交互
        var html = document.documentElement;
        var yongshi = document.getElementsByClassName('yongshi')[0];
        var fenshu = document.getElementsByClassName('fenshu')[0];
        html.addEventListener('keydown',userkey.relxs);
    </script>
</body>
</html>